<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>media record</title>
    <script src="https://qiuyiping.oss-cn-beijing.aliyuncs.com/js/jquery-3.2.1.min.js"></script>
</head>
<body>
<button onclick="startPreview()">preview</button>
<button onclick="startRecording()">开始录制</button>
<button onclick="stopRecording()">停止录制</button>
<video id="vdo"></video>
<br>
<textarea id="txt" style="width: 300px;height: 500px;"></textarea>
</body>
<script>
    var getUserMedia = navigator.webkitGetUserMedia;
    var g_stream = null, g_recorder = null;
    var chunks = [];
    var vdo = document.querySelector("#vdo");

    function startPreview() {
        getUserMedia.call(navigator, {
            video: true,
            audio: true
        }, function (stream) {
            g_stream = stream;
        }, function (error) {

        });
    }

    function stopRecording() {
        console.log(chunks);
        g_recorder.stop();
    }

    function startRecording() {
        g_recorder = new MediaRecorder(g_stream, {mimeType: "video/webm"});
        g_recorder.ondataavailable = function (e) {
            chunks.push(e.data);
        };
        g_recorder.onstop = function (e) {
            var blob = new Blob(chunks, {'type': 'video/webm'});
            var audioURL = URL.createObjectURL(blob);
            vdo.src = audioURL;
            window.open(audioURL);
            var reader = new window.FileReader();
            reader.readAsDataURL(blob);
            reader.onloadend = function () {
                var base64data = reader.result;
                console.log(base64data.split(',')[1]);
                var form = new FormData();
                form.append("idcardNumber", "42082119921021351X");
                form.append("idcardName", '邱宜平');
                form.append("validateData", '3388');
                form.append("video", blob);
//                form.append("base", base64data.split(',')[1]);

//                form.append("base", base64data.split(',')[1]);
                $.ajax({
                    url : 'http://192.168.137.1:8082/fruit/face/idcardlivedetectfour',
                    type : 'post',
                    data : form,
                    processData:false,
                    contentType:false,
                    success : function (data) {
                        $('#txt').text(JSON.stringify(data));
                        console.log(data);
                    },
                    error : function () {
                        console.log("error");
                    }
                });
            }
        }
        g_recorder.start();
    }

    $(document).ready(function () {
//        startPreview();
//        window.setTimeout("startRecording()", 1000);

    });
</script>
</html>